<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <div class="filter-content">
          <div class="filter-item">
<!--            <div class="label" style="width: 30px">-->
<!--              <p>搜索</p>-->
<!--            </div>-->
            <div class="label-content">
              <el-input class="search-input-width" v-model.trim="baseTable.tableReqDto.title" clearable placeholder="标题"></el-input>
              <el-button style="margin-left: 20px"  :auto-insert-space="true" type="primary" @click="baseTable.onSearch">查询</el-button>
            </div>
          </div>

        </div>
        <el-table :data="baseTable.tableData" v-loading="baseTable.tableLoading" stripe style="width: 100%">
          <template v-for="col in baseTable.tableColumns" :key="col.colKey">
            <el-table-column :header-align="col.align" :align="col.align" :prop="col.colKey" :label="col.title" :width="col.width">
              <template #default="{ row }">
                <table-date-column v-if="col.date" :date="row[col.colKey]" />
                <listing-info-column v-if="col.colKey === 'title'" :row="row" />
                <template v-if="col.colKey === 'storeName'">
                  <div class="text">{{ row.storeName }}/{{ row.marketplaceName }}</div>
                </template>
                <template v-if="col.colKey === 'status'">
                  <el-popover
                    title="刊登错误"
                    placement="left"
                    :width="600"
                    v-if="row.status === 'error'"
                  >
                    <template #default>
                      <el-table :data="row.issues">
                        <el-table-column type="expand">
                          <template #default="props">
                            <p class="text" v-text="props.row.message"></p>
                            <p class="text" v-text="props.row.attributeName"></p>
                          </template>
                        </el-table-column>
                        <el-table-column property="code" label="code" />
                        <el-table-column label="severity">
                          <template #default="{ row }">
                            <el-tag :type="row.severity === 'ERROR' ? 'danger' : 'warning'" effect="dark">{{ row.severity }}</el-tag>
                          </template>
                        </el-table-column>
                      </el-table>
                    </template>
                    <template #reference>
                      <el-tag :type="statusTextMap[row.status].type" effect="dark">{{ statusTextMap[row.status].value }}</el-tag>
                    </template>
                  </el-popover>
                  <el-tag v-else :type="statusTextMap[row.status].type" effect="dark">{{ statusTextMap[row.status].value }}</el-tag>
                </template>
                <template v-else-if="col.colKey === 'salePrice'">
                  <div class="text" v-text="row.salePrice + '(原价格' + row.originPrice + ')'"></div>
                </template>
                <template v-else-if="col.colKey === 'opt'">
                  <div class="table-opt">
                    <el-tooltip effect="dark" content="移除" placement="top">
                      <el-link @click="onDeleteSubmitListing(row)" :underline="false" class="opt-item">
                        <el-icon><Delete /></el-icon>
                      </el-link>
                    </el-tooltip>
                  </div>
                </template>
              </template>
            </el-table-column>
          </template>
        </el-table>
        <table-pagination :pagination="baseTable.dataPagination" @change="baseTable.onPaginationChange" />
      </el-card>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import TableDateColumn from '@/plugins/pair/table-date-column.vue'
import { Aim, Delete } from '@element-plus/icons-vue'
import TablePagination from '@/plugins/pair/table-pagination.vue'
import { useDefineTable } from '@/plugins/util/global-variable'
import { deleteSubmitListing, submitListingPage } from '@/api/common'
import ListingInfoColumn from '@/views/user/listing/pair/listing-info-column.vue'
import { ref } from 'vue'
const statusTextMap = ref({
  submit: {
    type: 'warning',
    value: '待发布',
  },
  error: {
    type: 'danger',
    value: '错误',
  },
  finish: {
    type: 'success',
    value: '完成',
  },
})
const baseTable = useDefineTable({
  tableReqDto: {
    title: '',
  },
  request: submitListingPage,
  tableColumns: [
    { colKey: 'title', title: '产品信息', width: '400' },
    { colKey: 'salePrice', title: '刊登价格', align: 'center' },
    { colKey: 'saleInventory', title: '刊登库存', align: 'center' },
    { colKey: 'storeName', title: '刊登到店铺', align: 'center' },
    { colKey: 'status', title: '刊登状态', align: 'center' },
    { colKey: 'createTime', title: '添加时间', align: 'center', date: true },
    { colKey: 'opt', title: '操作', width: '100', align: 'center' },
  ],
})

const onDeleteSubmitListing = (row: any) => {
  deleteSubmitListing(row.id).then((res) => {
    baseTable.exeRequest()
  })
}
</script>
<style scoped lang="scss"></style>
